<!DOCTYPE html>
<!-- 文档类型声明，告知浏览器使用的HTML版本-->
<html lang="zh-CN">
  <!-- 定义文档显示语言，zh-CN为中文 -->
  <head>
    <meta charset="UTF-8" />
    <!-- 文档字符编码，UTF-8为万国码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="head">标题标签,包括&lt;h1&gt;——&lt;h6&gt;</h1>
    <!-- &lt;为小于号,&gt;为大于号 -->
    <p>段落&nbsp;标签&lt;p&gt;</p>
    <!-- &nbsp;为空格 -->
    <br />换行标签&lt;br&gt;<br />
    <p>
      文本格式化标签<br />
      <strong>加粗&lt;strong&gt;</strong><br />
      <b>加粗&lt;b&gt;</b><br />
      <em>倾斜&lt;em&gt;</em><br />
      <i>倾斜&lt;i&gt;</i><br />
      <del>删除线&lt;del&gt;</del><br />
      <s>删除线&lt;s&gt;</s><br />
      <ins>下划线&lt;ins&gt;</ins><br />
      <u>下划线&lt;u&gt;</u>
    </p>
    <div>大盒子&lt;div&gt;</div>
    <!-- 一个div独占一行 -->
    <span>小盒子&lt;span&gt;1</span>
    <span>&lt;span&gt;2</span>
    <!-- 多个span在一行 -->
    <br />
    图像标签&lt;img&gt;
    <img
      src="../images/text.jpg"
      alt="图像标签"
      title="提示文本"
      width="500"
      height="300"
      border="15"
    />
    <!-- alt替换文本，当图像无法显示时显示该文本
    title提示文本，鼠标放到图像上显示该文本
    width图像宽度，height图像高度，border图像边框,这三个属性一般在css里写，宽高一般设置一个，另一个自适应 -->
    <br /><br />
    <a href="#" target="_blank">超链接标签&lt;a&gt;</a>
    <!-- href跳转目标，决定跳转到哪里，#为空连接；
    下载链接：如果连接到一个文件，会下载该文件；
    target目标打开方式，默认_self为当前窗口，_blank为新窗口 -->
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br /><br />
    <a href="#head">锚点链接</a>
    <!-- 锚点链接实现在当前页面内跳转，一般用于回到页面顶部，href后面添加目标，一般为目标id -->
    <br />
    表格标签&lt;table&gt; 表头&lt;th&gt;表格中行&lt;tr&gt; 单元格&lt;td&gt;
    <br />
    表格头部&lt;thead&gt;表格主体&lt;tbody&gt;
    <table align="center" border="1" cellpadding="0" cellspacing="0">
      <!-- align表格对齐方式，border表格边框
        cellpadding设置单元格内文字距边框距离，cellspacing设置单元格之间的距离 -->
      <thead>
        <tr>
          <th>奇数</th>
          <th>偶数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
    <br />
    合并单元格，跨行合并rowspan，跨列合并colspan
    <!-- 1.确认跨行还是跨列 
    2.目标单元格写属性
    3.删除多余单元格 -->
    <table align="center" border="1" cellpadding="0" cellspacing="0">
      <thead>
        <tr>
          <th colspan="3">这是跨列</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2">这是跨行</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>
    <br />
    列表标签：无序列表&lt;ul&gt;,列表行&lt;li&gt;
    <!-- ul、ol里面只能放li标签，但是li里面放什么标签都可以 -->
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    有序列表&lt;ol&gt;
    <ol>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ol>
    自定义列表&lt;dl&gt; 名词&lt;dt&gt;名词解释&lt;dd&gt;
    <dl>
      <dt>数字</dt>
      <dd>1</dd>
      <dd>2</dd>
      <dd>3</dd>
    </dl>
    <br />
    表单标签:表单域&lt;form&gt;<br />
    <!-- action指定目标地址，method提交方式，name用于识别表单 -->
    表单元素：输入框&lt;input&gt;<br />
    &lt;label&gt;标签一般配合&lt;input&gt;使用<br />
    下拉列表&lt;select&gt;<br />
    文本域&lt;textarea&gt;
    <!-- type定义表单元素的类型，name定义元素名称，value规定元素默认值
    checked默认选中该元素，maxlenght规定该元素可输入最大长度 -->
    <br />
    提示信息
    <form action="#" method="get" name="form1">
      <label for="name">用户名：</label>
      <input
        type="text"
        name="username"
        id="name"
        value="在这里输入用户名"
        maxlength="6"
      /><br />
      密码：<input type="password" name="password" /><br />
      性别：
      <label for="male">男</label>
      <input type="radio" name="gender" checked id="male" />
      <label for="fermale">女</label>
      <input type="radio" name="gender" id="fermale" /><br />
      爱好：吃饭<input type="checkbox" name="hobby" /> 睡觉<input
        type="checkbox"
        name="hobby"
      />打游戏<input type="checkbox" name="hobby" /><br />
      地址：
      <select name="address" id="">
        <option value="1">杭州</option>
        <option value="2" selected>台州</option>
        <option value="3">北京</option></select
      ><br />
      <textarea name="inf" id="" cols="30" rows="10">
        cols显示一行可以显示的字数，rows表示可以显示的行数
      </textarea>
      <br />
      <input type="button" value="这个按钮没有用" /><br />
      <input type="file" name="" id="" /><br />
      <input type="submit" value="提交" />
      <input type="reset" value="重置" />
    </form>
    <br />
  </body>
</html>
